@font-face {
    font-family: TacticSans;
    font-weight: bold;
    src: url("/public/fonts/TacticSans-Bld.otf") format("opentype");
}

@font-face {
    font-family: Gilroy;
    font-weight: bold;
    src: url("/public/fonts/Gilroy-Bold.otf") format("opentype");
}

@font-face {
    font-family: TacticSansExtExd;
    font-weight: bold;
    src: url("/public/fonts/TacticSansExtExd-Bld.otf") format("opentype");
}

.body-anonymous {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 5rem!important;
}

.content-anonymous {
    min-width: 0;
    flex-grow: 1;
}

.footer-anonymous {
    color:#f2f6fc !important;
    line-height: 1;
    font-size: .8rem;
}

.footer-admin {
    color:#a7aeb8 !important;
    line-height: 1;
    font-size: .8rem;
    height: 5rem;
    display: flex;
    align-items: center;
}

.logo-header-anonymous {
    max-width: 100%;
    max-height: 100px;
}

.body-anonymous {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 5rem!important;
}

.content-anonymous {
    min-width: 0;
    flex-grow: 1;
}

.footer-anonymous {
    color:#f2f6fc !important;
    line-height: 1;
    font-size: .8rem;
}

.footer-admin {
    color:#a7aeb8 !important;
    line-height: 1;
    font-size: .8rem;
    height: 5rem;
    display: flex;
    align-items: center;
}

.logo-header-anonymous {
    max-width: 100%;
    max-height: 100px;
}

.bg-jeu {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: url('/public/images/fond_jeu.jpg');
    background-size: cover;
}

.bg-pendu {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #ffffff;
}

.bg-ecran {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: url('/public/images/fond_ecran.jpg?saison=2026');
    background-size: cover;
}

.bg-vertical {
    background-image: url('/public/images/fond_vertical.jpg?saison=2026');
}

.logo-horizontal {
    min-height: 300px;
    background-image: url('/public/images/logo_horizontal.png?saison=2026');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.div-candidat {
    position: relative;
    width: 180px;
    height: 211px;
}

.div-candidat-sm {
    position: relative;
    width: 80px;
    height: 93px;
}

.img-candidat {
    position: absolute;
    top: 6.64%;     /* 14/211 : recadrage sur la zone de contenu du fond (dézoom) */
    left: 7.22%;    /* 13/180 */
    width: 85.56%;  /* 154/180 */
    height: 87.2%;  /* 184/211 */
    object-fit: cover;
    z-index: 2;
    /* masque = forme arrondie du fond, agrandi (1/inset) pour caler son rectangle arrondi sur la boîte */
    -webkit-mask-image: url('/public/images/vote/fond.png');
    mask-image: url('/public/images/vote/fond.png');
    -webkit-mask-size: 116.88% 114.67%;
    mask-size: 116.88% 114.67%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.fnd-candidat {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.bordure-candidat {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
    z-index: 3;
}

.alpha-candidat {
    filter: saturate(50%) brightness(50%);
}

/* ====== Vignettes groupées (vote par duos/trios) ======
   Un groupe = un cadre étiré sur N photos, avec UN seul masque arrondi autour du
   groupe (et non plus une vignette par candidat). Le fond et la bordure sont
   étirés (object-fit: fill) -> coins arrondis déformés, conformément au besoin. */
.div-groupe {
    position: relative;
}
.div-groupe-sm {
    height: 93px;
}
/* Aspect des tuiles = aspect des fonds générés (2 ou 3 cellules de 154px + marges
   13px de chaque côté, hauteur 211) -> fond_duo = 334x211, fond_trio = 488x211. */
.div-groupe-2 {
    aspect-ratio: 334 / 211;
}
.div-groupe-3 {
    aspect-ratio: 488 / 211;
}
.fnd-groupe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 1;
}
/* Bordure d'un groupe = "5-slice" horizontal de bordure.png (180px de large) :
   3 bandes fixes de 50px (coins/cible gauche, centre, droite) NON déformées, et
   2 connecteurs de 15px (segments de ligne droite) seuls étirés -> cible propre. */
.bordure-groupe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
}
.bordure-groupe .bd {
    height: 100%;
    background-image: url('/public/images/vote/bordure.png');
    background-repeat: no-repeat;
}
/* Bandes fixes : largeur = 50/211 de la hauteur (aspect-ratio) -> jamais étirées,
   taille constante quel que soit le nombre de candidats. */
.bordure-groupe .bd-fixe {
    flex: 0 0 auto;
    aspect-ratio: 50 / 211;
    background-size: auto 100%;
}
.bordure-groupe .bd-left {
    background-position: left center;
}
.bordure-groupe .bd-center {
    background-position: center center;
}
.bordure-groupe .bd-right {
    background-position: right center;
}
/* Connecteurs : seules les tranches sources [50;65] et [115;130] (15px) sont
   étirées horizontalement pour combler la largeur (lignes droites -> propre). */
.bordure-groupe .bd-stretch {
    flex: 1 1 0;
    min-width: 0;
    background-size: 1200% 100%;
}
.bordure-groupe .bd-conn1 {
    background-position: 30.303% center;
}
.bordure-groupe .bd-conn2 {
    background-position: 69.697% center;
}
/* Zone des photos = zone "contenu" du fond (marges vides exclues), comme en solo.
   top/hauteur identiques (14/211 et 184/211) ; left/largeur et masque dépendent du
   nombre de cellules (le masque = forme arrondie du fond_duo/trio correspondant). */
.photos-groupe {
    position: absolute;
    top: 6.6351%;        /* 14/211 */
    height: 87.2038%;    /* 184/211 */
    z-index: 2;
    display: flex;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.div-groupe-2 .photos-groupe {
    left: 3.8922%;       /* 13/334 */
    width: 92.2156%;     /* 308/334 */
    -webkit-mask-image: url('/public/images/vote/fond_duo.png');
    mask-image: url('/public/images/vote/fond_duo.png');
    -webkit-mask-size: 108.4416% 114.6739%;   /* 334/308 x 211/184 */
    mask-size: 108.4416% 114.6739%;
}
.div-groupe-3 .photos-groupe {
    left: 2.6639%;       /* 13/488 */
    width: 94.6721%;     /* 462/488 */
    -webkit-mask-image: url('/public/images/vote/fond_trio.png');
    mask-image: url('/public/images/vote/fond_trio.png');
    -webkit-mask-size: 105.6277% 114.6739%;   /* 488/462 x 211/184 */
    mask-size: 105.6277% 114.6739%;
}
.photos-groupe .img-photo {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.virtual-key {
    background-color: white;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    color: black;
    text-align: center;
    font-size: 25;
    font-weight: bolder;
    padding-top: 11px;
    margin: 10px;
}

.virtual-case {
    width: 40px;
    height: 40px;
    border: solid 4px white;
    border-radius: .75rem;
    margin: 10px;
}

.virtual-circle {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: #e8471e;
    margin: 8px;
}

.btn:disabled, .btn.disabled {
    pointer-events: none;
    opacity: 0.3;
}

.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
}

.video-content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    font-family: Arial, sans-serif;
}

/* Titre de l'écran cagnotte (cf. charte Design 2026 / TABLEAU ALL STARS).
   Police TacticSansExtExd-Bld, doré #EDC775, approche ~113, échelle horizontale 65 %
   (charte H/V inversée : la compression latérale donne le rendu "tassé" de la maquette).
   Comme l'écran loterie : position (top) et taille (font-size) calculées en JS depuis le
   cover de la vidéo 1920×1080 → flexible quelle que soit la résolution de l'écran géant. */
.titre-cagnotte {
    position: fixed;
    left: 50%;                   /* + translateX(-50%) ci-dessous = centrage horizontal.
                                    NB : surtout pas left:0/right:0, sinon la boîte fait
                                    toute la largeur de l'écran et la mesure de largeur
                                    (garde-fou JS) serait fausse → le titre déborderait. */
    z-index: 1;
    font-family: TacticSansExtExd;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.113em;     /* approche 113 % */
    color: #EDC775;
    white-space: nowrap;         /* titre sur une seule ligne, comme la maquette */
    /* translate(-50%, -50%) : centre le titre sur le point (centre écran ; "top" calculé
       en JS) ; scaleX(0.65) : compression horizontale (aspect tassé). */
    transform: translate(-50%, -50%) scaleX(0.65);
}

/* --- Grille des cagnottes (écran /cagnotte/ecran) ---
   Chaque cellule est positionnée/dimensionnée en JS (disposerGrille) : ratio constant 4.8917
   (cartouche 1174×240), taille variable selon R×C, centrée par les marges, dans la bande de
   contenu du fond. JS fixe aussi font-size = hauteur de cellule → les éléments internes
   (rang/nom/montant) se dimensionnent en em. */
#grille-cagnotte {
    opacity: 0;                  /* révélé par JS une fois les cellules positionnées (anti-flash) */
    transition: opacity 0.3s ease-in;
}
.cartouche {
    position: fixed;
    top: 0;
    left: 0;                     /* left/top/width/height (re)calculés en JS = la BOÎTE visible */
    z-index: 1;                  /* contexte d'empilement : média derrière, texte devant */
    font-family: TacticSans;
    font-weight: bold;
    /* contenu en flex : [rang] [nom extensible] [montant] → gère noms longs et montants variables */
    display: flex;
    align-items: center;
    padding: 0 0.4em 0 0.5em;    /* gauche : place au carré de rang ; droite : petite marge du montant */
    gap: 0.4em;
    overflow: visible;           /* le carré de rang (et la vidéo d'animation) débordent de la boîte (intentionnel) */
}
.cartouche-media {               /* média entier (PNG au repos ; remplacé par la vidéo IN/OUT en animation).
                                    Dimensionné/positionné en JS pour que sa BOÎTE visible couvre la cellule. */
    position: absolute;
    z-index: -1;                 /* derrière le texte de la cellule */
    pointer-events: none;
    /* glissement (transform) et fondu (opacity) de la boîte pendant le reclassement */
    transition: transform var(--duree-cartouche, 1.72s) ease-in-out,
                opacity var(--duree-cartouche, 1.72s) ease;
}
.cartouche .contenu {            /* couche nom+montant : glisse (translate) ou disparait pendant le reclassement */
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4em;
    /* durées pilotées par JS (var RALENTI). Translation (transform) et fondu (opacity) du
       contenu durent autant que la disparition (--duree-cartouche) → tout « en même temps ». */
    transition: transform var(--duree-cartouche, 1.72s) ease-in-out, opacity var(--duree-cartouche, 1.72s) ease;
}
/* Carrés de classement : couche SÉPARÉE, au-dessus des boîtes (qui glissent). Centrés sur le
   bord gauche de la cellule, position/taille calculées en JS (disposerGrille). Repères FIXES. */
#rangs-cagnotte {
    pointer-events: none;
}
#rangs-cagnotte .rang {
    position: fixed;
    top: 0;
    left: 0;                      /* left/top/font-size (re)calculés en JS */
    font-family: TacticSans;      /* hérité de .cartouche auparavant ; à redéclarer ici (couche séparée) */
    font-weight: bold;
    transform: translate(-50%, -50%);
    z-index: 5;                   /* AU-DESSUS des cartouches (z-index 1) et de leurs contenus qui glissent */
    width: 0.64em;
    height: 0.64em;
    border: 0.035em solid #cd9a2b;
    border-radius: 0.10em;
    background: #0d0b06;          /* fond opaque */
    display: flex;
    align-items: center;
    justify-content: center;
}
#rangs-cagnotte .rang span {
    font-size: 0.40em;
    line-height: 1;
    transform: scaleX(0.7);        /* caractères écrasés (condensés horizontalement) */
}
.cartouche .nom {                 /* extensible ; jamais tronqué (police réduite en JS si besoin) */
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.46em;
    color: #ffffff;
    white-space: nowrap;
    text-transform: uppercase;
    transform: scaleX(0.7);        /* écrasé horizontalement */
    transform-origin: left center;
}
.cartouche .montant {
    flex: 0 0 auto;
    font-size: 0.46em;
    white-space: nowrap;
    transform: scaleX(0.7);        /* écrasé horizontalement */
    transform-origin: right center;
}
/* Montant + numéro de classement : dégradé doré + léger estampage (cf. preview 7 candidats) */
.cartouche .montant,
#rangs-cagnotte .rang span {
    /* doré métallique (réglage final Luc) : moitié haute dorée vive, bascule nette à 50 % vers le brun sombre */
    background: linear-gradient(180deg, #fff4ba 0%, #ffe588 40%, #86683a 50%, #624c2b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0.025em 0.018em rgba(249, 193, 108, 0.42);
}

/* --- Animation de reclassement : balayage CSS du TEXTE (nom + montant). Les rangs (cartouches) sont
       FIXES ; seul le contenu se réordonne (cf. JS animerCagnottes() / jouerReclassement). --- */

/* DISPARITION du contenu (nom+montant) : réplique du masque MASK_TEXTE_CARTOUCHE_IN.mov
   (balayage luma gauche→droite). Joué EN PARALLÈLE de la vidéo cartouche (même durée).
   Timing calé sur le masque : visible jusqu'à ~28 %, balayage 28→72 %, caché après.
   La zone transparente (250 % de large) est assez large pour effacer TOTALEMENT le texte. */
@keyframes balayageTexteOut {
    0%, 28%   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }   /* visible (délai initial) */
    72%, 100% { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }     /* totalement effacé */
}
.cartouche .contenu.balayage-out {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 45%, #000 60%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 45%, #000 60%);
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: balayageTexteOut var(--duree-cartouche, 1.72s) ease-in-out forwards;
}

/* APPARITION du contenu (nom+montant) : INVERSE du balayage de disparition — le texte se
   révèle depuis la GAUCHE. Joué EN PARALLÈLE de la vidéo cartouche_out (même durée).
   Masque : zone opaque à GAUCHE (#000 0-40 %) → transparente à droite ; on déplace la fenêtre
   de droite (caché) vers la gauche (révélé) → la partie gauche du texte apparaît en premier. */
@keyframes balayageTexteIn {
    0%, 28%   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }   /* caché (délai initial) */
    72%, 100% { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }     /* totalement révélé */
}
.cartouche .contenu.balayage-in {
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 55%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 40%, transparent 55%, transparent 100%);
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: balayageTexteIn var(--duree-vague-out, 1.72s) ease-in-out forwards;
}

/* Image de la boule "propre" (sans le logo lion) : apparaît en fondu
   par-dessus la dernière image figée de la vidéo pour faire disparaître le lion. */
.ball-clean {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;   /* identique à .video-background pour un raccord pile poil */
    z-index: 0;                /* au-dessus de la vidéo (-1), sous le texte (1) */
    opacity: 0;
    transition: opacity 1.2s ease-in;
}

.ball-clean.show {
    opacity: 1;
}

/* Mot de la loterie révélé en fondu, style doré façon logo "DUO",
   centré sur la boule. La taille de police est ajustée par JS selon la longueur. */
.mot-loterie {
    position: fixed;
    left: 50%;                  /* repli ; position précise calculée en JS (cover de la boule) */
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
    line-height: 1.02;
    white-space: nowrap;
    font-family: TacticSans;
    font-weight: bold;
    text-transform: uppercase;
    /* dégradé en biais haut-gauche -> bas-droite (cf. logo "DUO" original) */
    background: linear-gradient(135deg, #fdeaa6 0%, #f8d262 38%, #eaa226 72%, #c9760f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0.4vh 1.2vh rgba(0, 0, 0, 0.55));
    opacity: 0;
    transition: opacity 1.2s ease-in;
}

.mot-loterie.show {
    opacity: 1;
}

.cartouche-cagnotte-sm {
    width:700px;
}

.cartouche-cagnotte-md {
    width:900px;
}

.cartouche-cagnotte-lg {
    width:1000px;
}

.montant-cagnotte {
    position: relative;
    height: 0px;
    color:rgba(255, 255, 255, 0.5);
    text-align:right;
    font-family: gilroy;
    -webkit-text-stroke: 1px #ffffff;
}

.montant-cagnotte-dark {
    color:rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: 1px #000000;
}

.montant-cagnotte-sm {
    font-size: 90pt;
    top: -178;
    left: -110;
}

.montant-cagnotte-md {
    font-size: 115pt;
    top: -225;
    left: -141;
}

.montant-cagnotte-lg {
    font-size: 128pt;
    top: -249;
    left: -157;
}